import React, { useEffect } from 'react'
import './map.scss'
import Headernav from '../../components/headerNav/Headernav'
import axios from 'axios'
import Houseitem from '../../components/houseItem/Houseitem'
import { useState } from 'react'
import { Popup } from 'antd-mobile'
export default function Mapcom(props) {

  const currentCity = JSON.parse(window.sessionStorage.getItem('currentCity') || JSON.stringify({label:"广州",value:"AREA|e4940177-c04c-383d",pinyin:"guangzhou", short:"gz"}))

  const BMap = window.BMap;
  let map = null;
  useEffect(() => {
    initMap()
  },[])

  // 初始化地图
  const initMap = () => {
    // 初始化实例
    map = new BMap.Map('mapCon');
    // 平移缩放控件
    map.addControl( new BMap.NavigationControl() );
    // 比例尺控件
    map.addControl( new BMap.ScaleControl() )
    // 地图类型控件
    map.addControl( new BMap.MapTypeControl() )
    // 渲染覆盖物方法调用
    renderLable(currentCity.value)
  }

  // 渲染覆盖物
  const renderLable = async (value,coord=undefined, zoom=11) => {
    let {data:{body:data}} = await axios.get('http://localhost:8080/area/map?id='+value);
    createLabel(data,coord, zoom)
    map.clearOverlays()
  }
  // 创建覆盖物
  const createLabel = (data, coord , zoom) => {
    // 解析器
    const myGeo = new BMap.Geocoder();
    // 地址解析服务
    myGeo.getPoint(currentCity.label, (point) => {

      data.forEach((item) => {

        // 创建label实例对象
        const labelLays = new BMap.Label('',{
          position: new BMap.Point(item.coord.longitude,item.coord.latitude),
          offset: new BMap.Size(-35,-35)
        })

        // 调用 setStyle() 方法设置样式
        labelLays.setStyle({ border : ' 0px solid rgb(255,0,0)' , padding : '0px' })

        // 根据图例大小调用对应方法
        zoom < 15 ? createCircle(item, labelLays, zoom) : createRect(item, labelLays)

      })

      map.centerAndZoom(coord ? new BMap.Point(coord.longitude,coord.latitude) : point, zoom)
    }, currentCity.label);
  }
  // 创建区，县覆盖物
  const createCircle = ({label, count, value, coord}, labelLays, zoom) => {
    // 设置内容结构
    labelLays.setContent(
      `<div class="bubble">
        <p>${label}</p>
        <p>${count}套</p>
      </div>`
    )
    // 添加单击事件
    labelLays.addEventListener('click', () => {
      renderLable(value,coord, zoom + 2)
      })
    // 将文本覆盖物添加到地图中
    map.addOverlay(labelLays)
  }


  // 创建小区覆盖物
  const createRect = ({label, count, value, coord}, labelLays) => {
    // 设置内容结构
    labelLays.setContent(
      `<div class="bubble2">
        <p>${label}</p>
        <p>${count}套</p>
        <div class="icon"></div>
      </div>`
    )

    // 添加单击事件
    labelLays.addEventListener('click', () => {
      setVisible(false)
      map.centerAndZoom( new BMap.Point(coord.longitude,coord.latitude) , 15)
      axios.get(`http://localhost:8080/houses?cityId=${value}`).then(({data:{body:data}}) => {
        setList(data.list)
        setVisible(true)
      })    
      
    })
    // 将文本覆盖物添加到地图中
    map.addOverlay(labelLays)
  }


  const [visible, setVisible] = useState(false)
  const [houseList, setList] = useState([])

  let titlestyle = {
        padding: '0 0.1rem',
        height: '0.45rem',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#aaa'
  }



  return(
    <div className='mapcom'>
      <Headernav title="地图找房" backcolor="#f4f4f4" color="#000"/>
      <div className='content'>
        <div  id="mapCon"></div>
      </div>
      <Popup
        mask={false}
        visible={visible}
      >
        <div className='bottomTitle'style={titlestyle}>
          <b style={{fontSize:"0.17rem"}}>房屋列表</b>
          <span>更多房源</span>
        </div>
        <div className='bottomContent' style={{ height: '40vh', overflowY: 'scroll' }}>
          <Houseitem houselist={houseList}/>
        </div>
      </Popup>
    </div>
  )
}